<template>
    <view>
        <!-- firstpages/information/index.wxml -->
        <view class="box">
            <view class="centers" @tap="afterRead1">
                <view class="margin-right-sm">上传头像</view>
                <view class="iconbox">
                    <image :src="headImg ? headImg : shopimgUrl + 'photo.png'"></image>
                </view>
            </view>
        </view>

        <view class="box">
            <view class="h-86 centers">
                <view class="margin-right-sm">用户性别</view>
                <view>
                    <radio-group @change="radioChange">
                        <label class="radio">
                            <radio value="1" :checked="true" />
                            男
                        </label>
                        <label class="radio">
                            <radio value="2" />
                            女
                        </label>
                    </radio-group>
                </view>
            </view>
            <view class="moudle bg-white radius margin-lr-sm padding-lr-sm box-sizing padding-tb flexs align-center text-df margin-top-sm">
                <view class="margin-right-sm">门店名称</view>
                <input class="flex-sub" :value="name" @input="getname" placeholder="店名+地标 例：沙宣美发（大冲店）" maxlength="10" />
            </view>
            <view class="moudle bg-white radius margin-lr-sm padding-lr-sm box-sizing padding-tb flexs align-center text-df margin-top-sm" @tap="showmolde">
                <view class="margin-right-sm">选择地区</view>
                <view class="flexs justify-between flex-sub">
                    <view :class="'text-df ' + (city ? '' : 'text-darkGrey')">{{ city ? city : '请选择地区' }}</view>
                    <!-- <view bindtap="getLocation" class="centers">
      <van-icon name="location-o" color="#FF8722" />
    </view> -->
                </view>
            </view>
            <view class="moudle bg-white radius margin-lr-sm padding-lr-sm box-sizing padding-tb flexs align-start text-df margin-top-sm">
                <view class="margin-right-sm">详细地址</view>
                <textarea
                    class="flex-sub text-df"
                    :value="address"
                    @input="getaddress"
                    style="height: 200rpx"
                    placeholder="请填写详细地址"
                    placeholder-style="font-size:14px;"
                ></textarea>
            </view>
        </view>
        <!-- <van-popup show="{{ show }}" position="bottom" bind:close="onClose">
  <van-area area-list="{{ areaList }}" columns-num="{{ 3 }}" title="选择城市" bind:cancel="onClose" bind:confirm="onFirm" />
</van-popup> -->
        <view class="savebtn" @tap="onSave">确认</view>
    </view>
</template>

<script>
// firstpages/information/index.js
const app = getApp(); // 引入app

const _request = require('../../utils/request.js'); // 引入SDK核心类，js文件根据自己业务，位置可自行放置

var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');

var qqmapsdk;

const area = require('../../utils/area');

export default {
    data() {
        return {
            baseurl: app.globalData.baseurl,
            //全局baseurl路径
            shopimgUrl: app.globalData.shopimgUrl,
            show: false,
            areaList: area.areaList,
            name: '',
            address: '',
            city: '',
            GDId: [],
            location: '',
            province: null,
            citydata: null,
            district: null,
            latitude: '',
            longitude: '',
            headImg: '',
            gender: 1 // 默认是男
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 男女
        radioChange(e) {
            this.setData({
                gender: e.detail.value
            });
        },

        // 头像
        afterRead1() {
            let _this = this;

            uni.chooseImage({
                success(res) {
                    const tempFilePaths = res.tempFilePaths;
                    uni.uploadFile({
                        url: _this.baseurl + '/store-api/file/batchUpload',
                        filePath: tempFilePaths[0],
                        name: 'files',
                        header: {
                            token: uni.getStorageSync('token') || null
                        },
                        formData: {
                            file: 'file'
                        },

                        success(res) {
                            const headImg = JSON.parse(res.data).data[0];

                            _this.setData({
                                headImg
                            });
                        },

                        fail(error) {
                            console.log(error);
                        },

                        complete(res) {
                            console.log(res);
                        }
                    });
                }
            });
        },

        getname(e) {
            this.setData({
                name: e.detail.value
            });
        },

        getaddress(e) {
            this.setData({
                address: e.detail.value
            });
        },

        showmolde() {
            uni.navigateTo({
                url: '/firstpages/information/site/index'
            }); // this.setData({
            //   show: true
            // });
        },

        onClose() {
            this.setData({
                show: false
            });
        },

        onFirm(e) {
            this.setData({
                show: false,
                city: e.detail.values.map((item) => {
                    return item.name;
                })
            });
        },

        onSave() {
            const { headImg, name, city, GDId, location, province, citydata, district, latitude, longitude, address, gender } = this;

            if (!headImg) {
                uni.showToast({
                    title: '请上传头像',
                    icon: 'none'
                });
                return;
            }

            if (!name) {
                uni.showToast({
                    title: '请输入门店名称',
                    icon: 'none'
                });
                return;
            }

            if (!city) {
                uni.showToast({
                    title: '请选择地区',
                    icon: 'none'
                });
                return;
            }

            if (!address) {
                uni.showToast({
                    title: '请输入详细地址',
                    icon: 'none'
                });
                return;
            }

            let that = this;
            let parms = {
                cityGDId: GDId[1] || '',
                districtGDId: GDId[2] || '',
                latitude: latitude,
                location: address,
                longitude: longitude,
                mobile: uni.getStorageSync('user').mobile,
                provinceGDId: GDId[0] || '',
                storename: name,
                userId: uni.getStorageSync('userid')
            }; // 实例化API核心类

            qqmapsdk = new QQMapWX({
                key: 'MBEBZ-6VQCP-EYSDK-LT7FQ-2LNUS-G4BTN'
            });
            qqmapsdk.geocoder({
                address: `${city[0]}${city[1]}${city[2]}${address}`,
                success: function (res) {
                    parms.latitude = res.result.location.lat || '';
                    parms.longitude = res.result.location.lng || '';
                    that.saveInfo(parms, gender, headImg);
                },
                fail: function (err) {
                    //获取经纬度失败
                    console.log('获取经纬度失败err: ', err); //获取经纬度失败,先保存用户信息

                    _request
                        .postObj('/storeUser/doUserData', {
                            password: '123456',
                            gender: gender,
                            id: uni.getStorageSync('userid'),
                            headPortrait: headImg
                        })
                        .then((res) => {
                            setTimeout(() => {
                                uni.navigateTo({
                                    url: '/pages/auth/index'
                                });
                            }, 1000);
                        });
                }
            });
            console.log('parms-->', parms);
        },

        saveInfo(parms, gender, headImg) {
            // 保存个人信息
            _request
                .postObj('/storeUser/doUserData', {
                    password: '123456',
                    gender: gender,
                    id: uni.getStorageSync('userid'),
                    headPortrait: headImg
                })
                .then((res) => {
                    // 保存门店信息
                    _request.postObj('/storeUser/doStoreData', parms).then((res) => {
                        if (res.data.code == 200) {
                            uni.setStorageSync('storeId', res.data.data);
                            uni.showToast({
                                title: '申请成功，前往认证',
                                icon: 'none'
                            });
                            setTimeout(() => {
                                uni.navigateTo({
                                    url: '/pages/auth/index'
                                });
                            }, 2000);
                        } else {
                            uni.showToast({
                                title: res.data.message || '保存失败!',
                                icon: 'none',
                                duration: 2500
                            });
                        }
                    });
                });
        }
    }
};
</script>
<style>
/* firstpages/information/index.wxss */
.box {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 0px 1px 29px 0px rgba(0, 0, 0, 0.04);
    border-radius: 10rpx;
    box-sizing: border-box;
    margin: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    vertical-align: center;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
}

.centers {
    width: 710rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    vertical-align: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
    margin: 30rpx;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    color: #333333;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
}

.iconbox {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    background-color: #ededed;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
}

.iconbox image {
    height: 138rpx;
    width: 138rpx;
    z-index: 3;
    border-radius: 50%;
}

.text {
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    width: 160rpx;
}

.text1 {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    width: 160rpx;
}

.placeholder-class {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
}

.h-86 {
    height: 86rpx;
    /* border-bottom: 1px solid #E8E8E8; */
}

.radio {
    margin: 0 40rpx;
}

/* 未选中的样式 */
radio .wx-radio-input {
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    /* 圆角 */
    /* border: 2rpx solid red; */
}

/* 选中后 背景及勾 的样式 */
radio .wx-radio-input.wx-radio-input-checked::before {
    width: 28rpx;
    height: 28rpx;
    border-radius: 50%;
    /* 圆角 */
    line-height: 28rpx;
    text-align: center;
    font-size: 20rpx;
    /* 勾大小 */
    color: #fff;
    /* 白色勾  */
    background: #ff8722;
    transform: translate(-50%, -50%) scale(1);
}

.savebtn {
    width: 690rpx;
    height: 90rpx;
    background: #ff8722;
    border-radius: 45rpx;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #f3f3f3;
    line-height: 90rpx;
    text-align: center;
    margin: 30rpx 30rpx 0 30rpx;
    position: absolute;
    bottom: 230rpx;
    z-index: 99;
}

.moudle {
    width: 710rpx;
    box-shadow: 2px 2px 8px 2px rgba(241, 241, 241, 0.4);
}

.bar_btn {
    width: 670rpx;
    line-height: 90rpx;
    position: fixed;
    bottom: 60rpx;
    left: 40rpx;
}

page {
    background-color: #fbfbfb;
}
</style>
